<template>
    <div style="margin-left:15px;">
        <h2>系统公告</h2>
        <el-row style="margin-top: 15px;">
            <el-col :span="12">
                <el-collapse v-model="activeName" accordion>
                    <el-collapse-item v-for="item in noticeData" :key="item.id" :title="item.name" :name="item.id">
                        <div style="padding:0 20px;">
                            <strong>公告内容：</strong>
                            {{ item.content }}
                        </div>
                        <div style="padding:0 20px;">
                            <strong>发布时间：</strong>
                            {{ item.pubDate }}
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </el-col>
            <el-col :span="4" class="statisticStyle">
                <el-statistic title="会员人数" :value="memberValue" />
            </el-col>
            <el-col :span="4" class="statisticStyle">
                <el-statistic title="教练人数" :value="trainerValue" />
            </el-col>
            <el-col :span="4" class="statisticStyle">
                <el-statistic title="私教课数量" :value="privateClassValue" />
            </el-col>
        </el-row>
        <el-row style="margin-top: 45px;">
            <el-col :span="12" class="statisticStyle">
                <div ref="echartsRef" style="height: 400px; width: 500px">gamePlay</div>
            </el-col>
            <el-col :span="12" class="statisticStyle">
                <div ref="echartsPie" style="height: 400px; width: 500px">echartsPie</div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useTransition } from "@vueuse/core";
import * as echarts from "echarts";
import api from "../api";

const echartsRef = ref();
const echartsPie = ref();
const echartsLine = ref();
const noticeData = [
    { id: 1, name: "公告标题1", content: "公告内容1", pubDate: "2024-04-11" },
    { id: 2, name: "公告标题2", content: "公告内容2", pubDate: "2024-04-11" },
    { id: 3, name: "公告标题3", content: "公告内容3", pubDate: "2024-04-11" },
]
const activeName = ref(noticeData.length > 0 ? noticeData[0].id : "");
onMounted(async () => {
    initBar();
    let result = await api.get('api/alltrainer');
    trainerNumber.value = result.data.length
    result = await api.getSearch('/api/private', { size: 1000, page: 1 })
    privateClassNumber.value = result.data.list.length
    result = await api.getSearch('/api/member', { size: 10000, page: 1 })
    memberNumber.value = result.data.list.length
});

const memberNumber = ref(0);
const memberValue = useTransition(memberNumber, {
    duration: 500
});
const trainerNumber = ref(0);
const trainerValue = useTransition(trainerNumber, {
    duration: 500
});

const privateClassNumber = ref(0)
const privateClassValue = useTransition(privateClassNumber, {
    duration: 500
});

async function initBar() {
    // getData().then(res => {
    //     if (res.code == 200 && res.data != null) {
    //         getBar(res.data.xAxis, res.data.yAxis, res.data.yAxis2);
    //     }
    // });
    let res = await api.get('/api/trainerchart')
    console.log(res.data)
    getBar(res.data.xAxis, res.data.yAxis, res.data.yAxis2)
    // getData2().then(res => {
    //     if (res.code == 200 && res.data != null) {
    //         getPie(res.data);
    //     }
    // });
    res = await api.get('/api/bookchart')
    getPie(res.data);
}
function getBar(xAxis, yAxis, yAxisDataForLine) {
    const myChart = echarts.init(echartsRef.value);

    const option = {
        title: {
            text: '教练销售统计'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['总销售额', '卖出课时']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis
        },
        yAxis: [
            {
                type: 'value',
                name: '总销售额',
                axisLabel: {
                    formatter: '{value} 元'
                }
            },
            {
                type: 'value',
                name: '卖出课时',
                min: 0,
                axisLabel: {
                    formatter: '{value} 课时'
                }
            }
        ],
        series: [
            {
                name: '总销售额',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: yAxis
            },
            {
                name: '卖出课时',
                type: 'line',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                yAxisIndex: 1,
                smooth: true,
                data: yAxisDataForLine
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option);
}

function getPie(data) {
    const myChartPie = echarts.init(echartsPie.value);
    const option = {
        title: {
            text: "人气公共课top5"
        },
        tooltip: {
            trigger: "item"
        },
        radius: ["40%", "70%"],
        legend: {
            top: "5%",
            left: "center"
        },
        series: [
            {
                type: "pie", // 设置图表类型为饼图
                radius: ["40%", "70%"], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                itemStyle: {
                    borderRadius: 10,
                    borderColor: "#fff",
                    borderWidth: 2
                },
                toolyip: {
                    trigger: "item",
                    formatter: "{b}:{c}({d}%)"
                },
                label: {
                    show: false,
                    position: "center"
                },
                //中间框字体样式
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 30,
                        fontWeight: "bold",
                        formatter: function (params) {
                            // 返回当前数据点的值  
                            return params.value;
                        }
                    }
                },
                labelLine: {
                    show: false
                },
                data
            }
        ]
    };

    myChartPie.setOption(option);
}
</script>
<style scoped>
.el-statistic {
    --el-statistic-content-font-size: 38px;
    --el-statistic-title-font-size: 18px;
}

.el-collapse-item {
    --el-collapse-header-font-size: 16px;

}

::v-deep .el-collapse-item__header {
    font-weight: 550;
}

.statisticStyle {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    /* 防止子元素换行 */
}
</style>